<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>品牌案例</title>

    <script src="js/axios.min.js"></script>
    <style>


        table {
            border: solid 1px #ccc;
            width: 80%;
            text-align: center;

        }

        table th {
            border: solid 1px #ccc;
            line-height: 30px;
        }

        table tr {
            border: solid 1px #ccc;
            line-height: 30px;
        }

        table td {
            border: solid 1px #ccc;
        }
    </style>
</head>

<script>





    window.onload = function () {

        //发送请求
        axios(
            {
                url:'/brand-case/BrandAllServlet',
                method:'get'

        }).then(function (resp){

            //解析 resp.data Array ,元素遍历 ，封装 <tr></tr>

            var tableData =resp.data;
            var tableHtml = '';


            //封装遍历 每一行   画 html
            for(let  i = 0;i<tableData.length;++i)
            {
                tableHtml += "<tr>\n" +
                "<td>"+(i+1)+"</td>\n" +
                "<td>"+tableData[i].brandName+"</td>\n" +
                "<td>"+tableData[i].companyName+"</td>\n" +
                "<td>"+tableData[i].ordered+"</td>\n" +
                "<td>"+tableData[i].description+"</td>\n" +
                "<td>"+(tableData[i].status==1?'启用':'禁用')+"</td>\n" +
                "<td><a href=\"brandInfo.html?id="+tableData[i].id+"\"><button > 修改</button></a>  " +
                    "<button onclick=\"deleete("+tableData[i].id+")\">删除</button></td>\n" +
                "</tr>";
            }

            //1.现获取
            var tb = document.getElementById("tbody");

            tb.innerHTML =tableHtml
        })


    }

    //加载品牌数据
    function getBrandAll()
    {
        //发送请求
        axios(
            {
                url:'/brand-case/BrandAllServlet',
                method:'get'

            }).then(function (resp){

            //解析 resp.data Array ,元素遍历 ，封装 <tr></tr>

            var tableData =resp.data;
            var tableHtml = '';


            //封装遍历 每一行   画 html
            for(let  i = 0;i<tableData.length;++i)
            {
                tableHtml += "<tr>\n" +
                    "<td>"+(i+1)+"</td>\n" +
                    "<td>"+tableData[i].brandName+"</td>\n" +
                    "<td>"+tableData[i].companyName+"</td>\n" +
                    "<td>"+tableData[i].ordered+"</td>\n" +
                    "<td>"+tableData[i].description+"</td>\n" +
                    "<td>"+tableData[i].status+"</td>\n" +
                    "<td><button >修改</button>  " +
                    "<button onclick=\"deleete("+tableData[i].id+")\">删除</button></td>\n" +
                    "</tr>";
            }

            //1.现获取
            var tb = document.getElementById("tbody");

            tb.innerHTML =tableHtml
        })

    }
    function deleete(id)
    {

        //发送删除请求
        axios({url:'/brand-case/BrandDelServlet?id='+id,method: 'get'})
            .then(function (resp){
                if(resp.data == "OK")
                {
                    //重新加载数据
                    getBrandAll()
                }else{

                    alert('删除失败!!!');
                }
            })


    }


</script>

<body>
<a href="brandInfo.html"><button id="add">新增</button></a>
<hr>

<table cellpadding="0" cellspacing="0" align="center">

    <thead>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
    </thead>

    <tbody id="tbody">

    </tbody>
</table>
</body>
</html>